<template>
  <div class="transaction-smart-alerts" v-if="alerts.length > 0">
    <el-card class="alerts-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon><Bell /></el-icon>
          <span>智能提醒</span>
        </div>
      </template>
      <div class="alerts-content">
        <div 
          v-for="alert in alerts" 
          :key="alert.id"
          class="alert-item"
          :class="`alert-${alert.type}`"
          @click="handleAlertClick(alert)"
        >
          <el-icon :size="16" :color="getAlertColor(alert.type)">
            <component :is="getAlertIcon(alert.type)" />
          </el-icon>
          <div class="alert-text">
            <div class="alert-title">{{ alert.title }}</div>
            <div class="alert-description">{{ alert.description }}</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Bell, Warning, Coin, DocumentCopy, TrendCharts } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

interface Alert {
  id: string
  type: 'duplicate' | 'largeAmount' | 'abnormalTime' | 'trend'
  title: string
  description: string
  priority: 'high' | 'medium' | 'low'
  transactions?: any[]
}

interface Props {
  transactions: any[]
}

const props = defineProps<Props>()
const emit = defineEmits(['alert-click'])

// 计算智能提醒
const alerts = computed(() => {
  const alerts: Alert[] = []
  
  // 检查重复交易
  const duplicateTransactions = checkDuplicateTransactions(props.transactions)
  if (duplicateTransactions.length > 0) {
    alerts.push({
      id: 'duplicate-transactions',
      type: 'duplicate',
      title: `发现${duplicateTransactions.length}笔重复交易`,
      description: '检测到相同金额、时间或对方账户的重复银行流水',
      priority: 'high',
      transactions: duplicateTransactions
    })
  }
  
  // 检查大额交易
  const largeAmountTransactions = checkLargeAmountTransactions(props.transactions)
  if (largeAmountTransactions.length > 0) {
    alerts.push({
      id: 'large-amount-transactions',
      type: 'largeAmount',
      title: `发现${largeAmountTransactions.length}笔大额交易`,
      description: '检测到超过设定阈值的大额银行流水',
      priority: 'medium',
      transactions: largeAmountTransactions
    })
  }
  
  // 检查异常时间交易
  const abnormalTimeTransactions = checkAbnormalTimeTransactions(props.transactions)
  if (abnormalTimeTransactions.length > 0) {
    alerts.push({
      id: 'abnormal-time-transactions',
      type: 'abnormalTime',
      title: `发现${abnormalTimeTransactions.length}笔异常时间交易`,
      description: '检测到非工作时间的大额银行流水',
      priority: 'medium',
      transactions: abnormalTimeTransactions
    })
  }
  
  return alerts
})

// 检查重复交易
const checkDuplicateTransactions = (transactions: any[]) => {
  const duplicates: any[] = []
  const transactionMap = new Map<string, any[]>()
  
  transactions.forEach(transaction => {
    // 使用金额+日期+对方账户作为唯一标识
    const key = `${transaction.amount}-${transaction.transactionDate}-${transaction.payerName}`
    if (!transactionMap.has(key)) {
      transactionMap.set(key, [])
    }
    transactionMap.get(key)?.push(transaction)
  })
  
  // 找出重复的交易
  transactionMap.forEach(transactions => {
    if (transactions.length > 1) {
      duplicates.push(...transactions)
    }
  })
  
  return duplicates
}

// 检查大额交易（假设阈值为10000）
const checkLargeAmountTransactions = (transactions: any[]) => {
  return transactions.filter(transaction => 
    Math.abs(transaction.amount) > 10000
  )
}

// 检查异常时间交易（非工作时间：晚上8点到早上8点）
const checkAbnormalTimeTransactions = (transactions: any[]) => {
  return transactions.filter(transaction => {
    if (Math.abs(transaction.amount) > 5000) { // 只检查大额交易
      const time = transaction.transactionTime
      if (time) {
        const [hours] = time.split(':').map(Number)
        return hours < 8 || hours >= 20
      }
    }
    return false
  })
}

// 获取提醒图标
const getAlertIcon = (type: string) => {
  const icons: Record<string, any> = {
    duplicate: DocumentCopy,
    largeAmount: Coin,
    abnormalTime: Warning,
    trend: TrendCharts
  }
  return icons[type] || Bell
}

// 获取提醒颜色
const getAlertColor = (type: string) => {
  const colors: Record<string, string> = {
    duplicate: '#f5222d',
    largeAmount: '#fa8c16',
    abnormalTime: '#faad14',
    trend: '#1890ff'
  }
  return colors[type] || '#1890ff'
}

// 处理提醒点击
const handleAlertClick = (alert: Alert) => {
  ElMessage.info(`查看${alert.title}`)
  emit('alert-click', alert)
}
</script>

<style scoped lang="scss">
.transaction-smart-alerts {
  margin-bottom: 20px;
  
  .alerts-card {
    border: 1px solid #ebeef5;
    border-radius: 8px;
    
    :deep(.el-card__header) {
      padding: 12px 20px;
      border-bottom: 1px solid #ebeef5;
      
      .card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: #1f2d3d;
      }
    }
    
    .alerts-content {
      .alert-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 16px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-bottom: 8px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        &:hover {
          background-color: #f5f7fa;
          transform: translateX(2px);
        }
        
        &.alert-duplicate {
          border-left: 3px solid #f5222d;
        }
        
        &.alert-largeAmount {
          border-left: 3px solid #fa8c16;
        }
        
        &.alert-abnormalTime {
          border-left: 3px solid #faad14;
        }
        
        &.alert-trend {
          border-left: 3px solid #1890ff;
        }
        
        .alert-text {
          flex: 1;
          
          .alert-title {
            font-weight: 500;
            color: #1f2d3d;
            margin-bottom: 4px;
            font-size: 14px;
          }
          
          .alert-description {
            font-size: 12px;
            color: #606266;
            line-height: 1.4;
          }
        }
      }
    }
  }
}
</style>